<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Grayscale a PNG</title>
</head>
<body>
<h1>Grayscale a PNG</h1>
<p>The left tortoise is the original, the right one is created using a custom stream which turns the PNG to grayscale.</p>
<img src="tortoise.png" width="150" height="84">
<img src="tortoise.png" width="150" height="84" id="target">
<script src="pako.min.js"></script>
<script src="crc32.js"></script>
<script src="png-lib.js"></script>
<script type="application/javascript">
  const image = document.getElementById('target');

  // Fetch the original image
  fetch('tortoise.png')
  // Retrieve its body as ReadableStream
  .then(response => response.body)
  // Create a gray-scaled PNG stream out of the original
  .then(rs => rs.pipeThrough(new TransformStream(new GrayscalePNGTransformer())))
  // Create a new response out of the stream
  .then(rs => new Response(rs))
  // Create an object URL for the response
  .then(response => response.blob())
  .then(blob => URL.createObjectURL(blob))
  // Update image
  .then(url => image.src = url)
  .catch(console.error);

</script>
</body>
</html>
